﻿@model List<DTOs.ProductCategoryDTO>

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">

    $(document).ready(function () {

        // if a category is clicked
        $("li a").click(function (event) {

            event.preventDefault();
            //alert($(this).attr("id"));

            loadProducts($(this).attr("id"), 1);

            
        });


        //function loadProducts(categoryId, pageNumber) {
        loadProducts = function (categoryId, pageNumber) {
            //alert(pageNumber);
            $.ajax({
                //url: '/Home/ProductList',
                url: '@Url.Action("ProductList")',

                //data: "{ 'pageNumber':" + page + ", 'categoryId':" + categoryId + "}",
                data: { "pageNumber": pageNumber, "categoryId": categoryId },
                success: function (data) {
                    $("#product-list").html(data);
                }
            });

            //alert("call");
        };


       

        loadProducts($("ul#catlist li:first a").attr("id"), 1);


    });

</script>


<div id="leftcontent_main">
<div id="leftcontent">
    	<div class="category_heading">Items</div>
    	<ul id="catlist">
        @foreach (var item in Model)
        {
        	<li ><a id="@item.Id" href="#" > @item.Name</a></li>
            
        }
        
        </ul>
    </div>


    <div class="offers">
        	<div class="newarrival">
            	<div class="arrow"></div>
            
            </div>
        
        </div>
</div>

    <div id="product-list">
   @* @Html.Partial("ProductList")*@
    </div>


   
    <div class="clear"></div>
